<template>
	<upper-navigation>林氏寻根</upper-navigation>
	<view id="Lin">
		<view class="twoImg-area">
			<image class="avatar" :src=" domain + '/static/Community/searchRootLeft.jpg'" />
			<image class="avatar" :src=" domain + '/static/Community/searchRootRight.jpg'" />
		</view>
		<view class="input-area">
			<input v-model="searchName" class="input-position" placeholder="填入想查询的姓名" name="NameInput" />
		</view>
		<navigator :url="'./RootSearchResults?name=' + searchName" class="point">
			点击查询
		</navigator>
		
		<!-- <navigator url="../Community/Activities" class="minitext-area">
			隐私声明
		</navigator> -->
		
		<view class="bottom-text">
			点击开启您的寻根之旅
		</view>
		<image :src=" domain + '/static/Community/rootBackImg.png'" class="bg-img"></image>
	</view>
	<bottom-bar></bottom-bar>
</template>

<script setup>
	 //朱熙然 @ 4月30日 页面
	 //姚珅 @ 5月18日 顶部底部导航组件添加
	import { domain } from '../../stores/useApp.js'
	import bottomBar from './bottomNavigationBar.vue'
	import upperNavigation from './upperNavigationNoline .vue'
	import { ref, reactive } from 'vue'
	import setShare from '../../share.js'
	setShare({
		title: '云上埔坪 - 林氏寻根',
		path: "/pages/Community/LinSearchRoot"
	});
	const searchName = ref('');
	
</script>

<style lang="less">
	@import url(./shared.less);
	@bg-color: #EBF3F8;
	@content-size: 25rpx;
	#Lin {
		padding: 0 25rpx;
		.twoImg-area{
			height: 505rpx; 
			border-radius: 50rpx;
			background-color: @bg-color;
			display: flex;
			.avatar {
				width: 300rpx;
				height: 440rpx;
				margin: auto;
			}
		}
		.input-area{
			background-color: @bg-color;
			width: 565rpx;
			height: 80rpx;
			margin: 55rpx auto;
			padding: 0 16rpx;
			box-sizing: border-box;
			.input-position {
				display: inline;
				font-size: 30rpx;
			}
		}
		.point {
			width:635rpx;
			height: 100rpx;
			margin: 0 auto;
			border-radius: 50rpx;
			background: url("https://www.lin-home.com/static/Community/searchRootLower.jpg") 50% 50% / cover;
			font-size: 36rpx;
			line-height: 100rpx;
			text-align: center;
			color: #fff;
		}
		.minitext-area{
			width: 100rpx;
			margin: 20rpx auto 0 auto;
			font-size: 16rpx;
			text-align: center;
		}
		.bottom-text{
			margin-top: 80rpx;
			text-align: center;
			font-size: 30rpx;
		}
		.bg-img {
			position: absolute;
			bottom: 100rpx;
			left: 200rpx;
			z-index: -1;
		}
	}
</style>